<template>
	<v-content ref="content" single background="#f6f6f6">
		<v-header title="设置" back background="#fff"></v-header>
		<div class="set">账号设置</div>
		<div class="listUser">
			<div class="item" @click="toPage('/pages/mine/personalInfo', { type: 0 })">
				<div class="left">
					<image class="image" src="/static/image/mine/icons/icon1.png" mode="aspectFit"></image>
				</div>
				<div class="right">
					<span>个人资料</span>
					<uni-icons type="forward" size="30" class="icons"></uni-icons>
				</div>
			</div>
			<div class="item" @click="toPage('/pages/mine/secure')">
				<div class="left">
					<image class="image" src="/static/image/mine/icons/icon2.png" mode="aspectFit"></image>
				</div>
				<div class="right">
					<span>账号安全</span>
					<uni-icons type="forward" size="30" class="icons"></uni-icons>
				</div>
			</div>
		</div>
		<div class="set">系统设置</div>
		<div class="listSystem">
			<!-- <div class="item">
				<div class="left">
					<image class="image" src="/static/image/mine/icons/icon3.png" mode="aspectFit"></image>
				</div>
				<div class="right">
					<span>推送设置</span>
					<switch @change="switch2Change" class="icons" />
				</div>
			</div> -->
			<!-- <div class="item">
				<div class="left">
					<image class="image" src="/static/image/mine/icons/icon4.png" mode="aspectFit"></image>
				</div>
				<div class="right" @click="clearCache()">
					<span>清除缓存</span>
					<span class="text"></span>
					<uni-icons type="forward" size="30" class="icons"></uni-icons>
				</div>
			</div> -->
			<div class="item" @click="toPage('/pages/mine/about')">
				<div class="left">
					<image class="image" src="/static/image/mine/icons/icon5.png" mode="aspectFit"></image>
				</div>
				<div class="right">
					<span>关于我们</span>

					<uni-icons type="forward" size="30" class="icons"></uni-icons>
				</div>
			</div>
			<!-- <div class="item">
				<div class="left">
					<image class="image" src="/static/image/mine/icons/icon6.png" mode="aspectFit"></image>
				</div>
				<div class="right">
					<span>版本更新</span>
					<span class="text">{{ version.title }}</span>
					<uni-icons type="forward" size="30" class="icons"></uni-icons>
				</div>
			</div> -->
			<div class="item" @click="loginout">
				<div class="left">
					<image class="image" src="/static/image/mine/icons/icon7.png" mode="aspectFit"></image>
				</div>
				<div class="right">
					<span>退出登录</span>
					<span class="text"></span>
					<uni-icons type="forward" size="30" class="icons"></uni-icons>
				</div>
			</div>
		</div>
	</v-content>
</template>
<script>
import mixins from "@/mixins"
export default {
	mixins: [mixins],
	data() {
		return {
			extraIcon: {
				color: "#4cd964",
				size: "22",
				type: "gear-filled",
			},
			version: {},
			count: 1,
			canClear: true,
		}
	},
	methods: {
		clearCache() {
			if (!this.canClear) {
				return
			}
			this.canClear = false
			uni.showLoading({
				title: "清理中...",
			})
			setTimeout(
				() => {
					uni.hideLoading()
					uni.showToast({
						title: "清除缓存成功",
					})
					setTimeout(() => {
						this.canClear = true
					}, 1000)
				},
				this.count > 1 ? 500 : 1500
			)
			this.count++
		},
		init() {
			this.getNewVersion()
		},
		switch2Change(e) {
			// e.detail.value 是此时的状态
			console.log("switch2 发生 change 事件，携带值为", e.detail.value)
		},
		loginout() {
			uni.showModal({
				title: "提示",
				content: "确定退出登录吗？",
				success: ({ confirm }) => {
					if (confirm) {
						this.$store.commit("logout")
					}
				},
			})
		},
		async getNewVersion() {
			const res = await this.$axios.get("/api/system/castleVersion/newVersion")
			this.version = res
		},
	},
}
</script>
<style lang="scss" scoped>
.padding {
	padding: 0 30rpx;
}
.set {
	padding: 27rpx 30rpx 27rpx;
	font-size: 26rpx;
	color: #999;
}
.listUser {
	.item {
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: start;
		.left {
			padding: 35rpx 0;
			padding-right: 20rpx;
			width: 120rpx;
			.image {
				margin: 0 45rpx 0 30rpx;
				width: 30rpx;
				height: 32rpx;
			}
		}
		.right {
			padding: 35rpx 0;
			padding-right: 20rpx;

			flex: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #f1f1f1;
			.icons {
				margin-left: auto;
				font-size: 40rpx !important;
				color: #c8c8c8 !important;
			}
			span {
				// margin-left: 30rpx;
			}
		}
	}
}
.listSystem {
	.item {
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: start;
		.left {
			padding: 35rpx 0;
			padding-right: 20rpx;
			width: 120rpx;
			.image {
				margin: 0 45rpx 0 30rpx;
				width: 30rpx;
				height: 32rpx;
			}
		}
		.right {
			padding: 35rpx 0;
			padding-right: 20rpx;

			flex: 1;
			display: flex;
			justify-content: start;
			align-items: center;
			border-bottom: 1px solid #f1f1f1;
			.icons {
				margin-left: auto;
				font-size: 40rpx !important;
				color: #c8c8c8 !important;
			}
			.text {
				margin-left: auto;
				color: #999;
				margin-right: 10rpx;
				font-size: 26rpx;
			}
			span {
				// margin-left: 30rpx;
			}
		}
		&:nth-child(2) {
			.right {
				.icons {
					margin: 0;
				}
			}
		}
		&:nth-child(4) {
			.right {
				.icons {
					margin: 0;
				}
			}
		}
	}
}
</style>
